ICT Skills

01. Introduction

There are a number of different ways to create web pages. Some are easier than others and some give you more control than others. The best thing is to experiment with a few different methods and then decide which suits you best.

You can create web pages by:

	keying in text and HTML tags in a basic text editor, such as Windows Notepad
	creating pages in a word processing, desktop publishing or other program and then saving as a web page – the program will automatically convert the pages for you
	creating pages in a web authoring program, such as Microsoft Front Page or Macromedia Dreamweaver.

Sometimes it is useful to combine more than one method – for example, create some pages using Microsoft Word or Microsoft Front Page and then edit the HTML in Notepad.

02. What is HTML?

HTML is the language of the Internet. It is a collection of ‘tags’ that tell web browsers how to display the pages.

HTML has developed a lot over the past decade or so and it is now possible to add extra functionality, such as buttons, animation and forms, among many other things.

Most of these functions involve adding script (like programming code) to the basic HTML file – for example, XML and JavaScript. Many web authoring tools insert this script automatically, without you needing to key it all in and learn the different languages.

If you want to learn more about any of these advanced functions there are many books available and, of course, you can search for information on the Internet.

03. Basic HTML file 1

The great thing about web pages is that you can create them using a simple text editor – such as Windows Notepad, which automatically comes loaded on all Windows computers – and a little knowledge of HTML tags. This means that it is possible to create web pages without having to spend lots of money on special software.

It is very useful to learn the basic HTML tags as you will find it easier to edit HTML that has been produced with another program.

Step-by-step instructions

1	Launch Notepad by clicking 'Start' on the Windows task bar, selecting 'Programs', then 'Accessories' then Notepad (the process may vary slightly from system to system).

continued

04. Basic HTML file 2

2	Key in the bold text below, pressing the 'Enter' key twice between each line:
	<html>	This shows that the following information is in HTML. Without this tag, web browsers will not know that the page is a web page and will be unable to display the page.
	<head>	This shows that the following text is the header information.
	<title> </title>	You enter the title of the page here, in between the two tags; the title will be displayed in the browser's title bar.
	</head>	This closes the header section.
	<body>	This shows that the following text is the body information (the main section of the file).
	</body>	This closes the body section (shows that the body section is finished).
	</html>	This closes the HTML section and shows that the file is finished. It should be the last tag in the file.
3	Save the file as index.htm (select ‘File’ from the menu bar, then ‘Save As’, navigate to the folder where you store your files, key in index.htm in the ‘File Name’ box and click ‘Save’).

You have now created a web page, although, if you opened it in a web browser, there would be no text displayed, because you have not added any yet – all you have added is HTML tags.

05. Adding text 1

Adding text is very easy. You just key it in to your file. However, you must remember to key it in between the correct tags. The title should be keyed in between the two title tags and then the main text of your page should be keyed in between the two body tags. The HTML tag should always be the last one on the page.

Step-by-step instructions

1	Key in the following title between the two title tags: My page
2	Key in the following body text between the two body tags: My page This is my page for learning HTML. I will be adding: different kinds of formatting lists images tables hyperlinks links to other pages. Different kinds of formatting

continued

06. Adding text 2

	In HTML, you can add paragraph and line breaks, headings and bold and italics, as well other more advanced types of formatting, which I may find out about later if I enjoy creating this simple web page. This line will display on a new line, using a line break tag.
3	Save your file by selecting ‘File’ from the menu bar and then selecting ‘Save’ from the drop-down menu.

07. Viewing your page

It is a good idea to view your page in a web browser at regular intervals while creating it. This way, you will spot any mistakes you may have made fairly quickly. It is also enjoyable to watch your web page build up as you add more text and HTML tags to it.

Launch your web browser (for example, Internet Explorer or Netscape Navigator).
Select ‘File’ from the menu bar.
Select ‘Open’ or ‘Open File’ from the drop-down menu.
Navigate to where your file is stored.
Double-click on your file to open it in the web browser.

If you have been following the steps to create your own web page, then you will notice that the title bar shows the title of your page (My page). You will also see that all the text runs on without any of the line breaks or paragraph breaks that you might have typed. This is because, in HTML, you need to use a tag to show when there is a new paragraph or a line break.

08. Paragraphs & line breaks 1

In HTML, you need to use a tag to show when there is a new paragraph or a line break. If you do not include these tags, then all your text runs on with no line breaks or spaces between paragraphs (as you will have seen if you have been following the steps to create your own web page).

The tags for paragraphs are <p> and </p>. The text of the paragraph needs to go in between these two tags. Text within the paragraph tags will be displayed with one blank line space above and below.

The tag for a line break is <br>. There is no closing tag for a line break. Text following a line break tag will appear on a new line, but there will be no blank line space in between.

continued

09. Paragraphs & line breaks 2

Step-by-step instructions

Enter paragraph tags to surround the paragraph that begins ‘This is my page’ (key in <p> at the beginning of the paragraph and </p> at the end of the paragraph).
Enter paragraph tags to surround the paragraph that begins ‘In HTML, you can’.
Enter a line break tag at the start of the line that begins ‘This line will display’ (key in <br>).
Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
View your web page in your web browser. Notice where the line breaks and blank line spaces have appeared.

10. Headings 1

HTML has special tags for headings. The text between the heading tags will be displayed in a larger font than the main text. There are six levels of heading available in HTML:

	<h1> </h1> – this is the biggest heading
	<h2> </h2> – this is the next biggest heading
	<h3> </h3> – this is the next biggest heading
	<h4> </h4> – this is the next biggest heading
	<h5> </h5> – this is the next biggest heading
	<h6> </h6> – this is the smallest heading

In most pages, the first three levels of heading will usually be enough.

continued

11. Headings 2

Step-by-step instructions

Make the line ‘My page’ into a level one heading by keying the tag <h1> at the beginning of the line and the tag </h1> at the end of the line.
Make the line ‘Different kinds of formatting’ into a level two heading by keying the tag <h2> at the beginning of the line and the tag </h2> at the end of the line.
Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
View your web page in your web browser. Notice text has been changed to headings according to your instructions.

12. Bold & italics 1

In HTML, you can add tags around words or phrases to give them emphasis.

	The bold tag is <b> </b> – text in between these tags will be displayed in bold (darker and thicker than ordinary text).
	The italics tag is <i> </i> – text in between these tags will be displayed in italics (a slanted version of ordinary text).

There are other emphasis tags available in HTML. If you want to find out about them, there are many books about HTML and you can also do a search on the Internet.

Step-by-step instructions

1	In the first paragraph, make the word ‘HTML’ bold, by entering the tag <b> before the word and the tag </b> after the word.

continued

13. Bold & italics 2

2	In the second paragraph, make the word ‘bold’ bold, by entering the tag <b> before the word and the tag </b> after the word.
3	Make the word 'italics' italic, by entering the tag <i> before the word and the tag </i> after the word.
4	Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
5	View your web page in your web browser. Notice where the bold and italics have appeared.

14. Lists: bulleted 1

In HTML, you can add tags so that text will display as a bulleted list. There are four tags needed to create bulleted lists:

	<ul> – this is the opening bulleted list tag and tells the browser that a list is going to follow
	<li> – this is the opening list item tag and tells the browser that the following text is an item in the list
	</li> – this is the closing list item tag and tells the browser that the list item has ended
	</ul> – this is the closing bulleted list tag and tells the browser that the list has ended

Step-by-step instructions

1	Add the tag <ul> at the beginning of the line starting ‘different kinds’ to show that a list is starting.

continued

15. Lists: bulleted 2

2	Add the tag <li> between the <ul> tag and the word ‘different’ to show that a list item is starting.
3	Add the tag </li> at the end of the line ‘different kinds of formatting’ to show that the list item has ended.
4	Add the <li> and </li> tags to the beginning and end of each of the other five lines in the list to show that each is a list item.
5	Add the tag </ul> at the end of the final line of the list (after the </li> tag) to show that the list has ended.
6	Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
7	View your web page in your web browser. The six lines you have formatted will now be displayed as a bulleted list.

16. Lists: numbered 1

In HTML, you can add tags so that text will display as a numbered list. There are four tags needed to create numbered lists:

	<ol> – this is the opening numbered list tag and tells the browser that a list is going to follow
	<li> – this is the opening list item tag and tells the browser that the following text is an item in the list
	</li> – this is the closing list item tag and tells the browser that the list item has ended
	</ol> – this is the closing numbered list tag and tells the browser that the list has ended

Step-by-step instructions

1	At the end of the text (after the line beginning ‘This line will’), type in the following text: This is number one. This is number two. This is number three.

continued

17. Lists: numbered 2

2	Add the tag <ol> at the beginning of the first line of this text (‘This is number one.’) to show that a list is starting.
3	Add the tag <li> between the <ol> tag and the word ‘This’ to show that a list item is starting.
4	Add the tag </li> at the end of the line (after ‘one.’) to show that the list item has ended.
5	Add the <li> and </li> tags to the beginning and end of each of the other two lines in the list to show that each is a list item.
6	Add the tag </ol> at the end of the final line of the list (after the </li> tag) to show that the list has ended.
7	Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
8	View your web page in your web browser. The three lines you have just added and formatted will now be displayed as a numbered list.

18. Images 1

HTML allows you to add images to your web pages fairly easily. However, there are a number of important points to remember:

	You can only add images that are saved as .jpg or .gif files.
	The images must be saved in the same folder as the web page (or in a folder within that folder).
	You need to know the width and height of an image in ‘pixels’. To find these out, load your web browser (e.g. Internet Explorer) and select ‘File’ from the menu bar, then ‘Open’ or ‘Open File’, (click ‘Browse’ if neccessary), ensure the 'Files of type' box reads 'All Files', navigate to where your image is stored and double-click on it. With the right mouse button, click on the image and its properties will be displayed, including its dimensions in pixels (width always comes before height when describing dimensions). If you cannot open the image in your web browser, open it in a graphics program and check the help files for information on how to find out the image‘s dimensions.

continued

19. Images 2

Example instructions
The following instructions use the example of inserting an image that is stored in the same folder as the web page. The file name is Image1.gif, its width is 100 pixels and its height is 200 pixels.

Where you want to place your image, type the following:

<img src="Image1.gif" width="100" height="200">

	<img is the tag for an image
	src="" indicates the file name and where it is located – if the file were located in a sub-folder called ‘Resources’ within the same folder as the web page, then it would read src="Resources/Image1.gif"
	width="" indicates the width of the image in pixels
	height="" indicates the height of the image in pixels
	> closes the tag (NB like the <br> tag, the <img> tag does not have a closing tag to go with it)

20. Tables: standard 1

In HTML, you can create tables by combining a number of different tags. The tags used in tables are:

	<table> </table> these are the table tags and identify any text within them as being part of a table
	<tr> </tr> these are the row tags and identify any text within them as being part of a table row
	<td> </td> these are the cell tags and identify any text within them as being part of a single cell of a table

Before you create a table you need to decide how many columns and rows it will have. You may find it useful to draw a simple sketch on a scrap of paper to help you picture the table.

continued

21. Tables: standard 2

Step-by-step instructions

You are going to add the following table to the end of your web page:

Row one: Cell number one	Row one: Cell number two	Row one: Cell number three
Row two: Cell number one	Row two: Cell number two	Row two: Cell number three
Row three: Cell number one	Row three: Cell number two	Row three: Cell number three

1	At the end of the web page (before the </body> tag), type in: <table> </table>
2	In between the two table tags, type in: <tr> </tr>

continued

22. Tables: standard 3

3	In between the two row tags, type in: <td> Row one: Cell number one </td>
4	After the closing tag (</td>), type in: <td> Row one: Cell number two </td>
5	After the second closing tag (</td>), type in: <td> Row one: Cell number three </td>
6	Enter the second row of the table: between the closing row tag (</tr>) and the closing table tag (</table>), type in: <tr> <td> Row two: Cell number one </td> <td>

continued

23. Tables: standard 4

	Row two: Cell number two </td> <td> Row two: Cell number three </td> </tr>
7	Enter the third row of the table: between the closing row tag (</tr>) and the closing table tag (</table>), type in: <tr> <td> Row three: Cell number one </td> <td> Row three: Cell number two </td> <td> Row three: Cell number three </td> </tr>

continued

25. Tables: borders

If you use the <table> tag on its own, the web browser will display it using its default settings. In some web browsers, a border of around 1 or 2 pixels will automatically appear and in some browsers the default will be no border at all. If you want a border of a certain width to appear or you want to ensure that no border is displayed, you will need to put this information in the <table> tag:

	<table border="1"> gives the table a border of 1 pixel
	<table border="0"> ensures the table has no border
	<table border="5"> gives the table a border of 5 pixels

Step-by-step instructions<

Add a border of 5 pixels to your table.

In the <table> tag (between the e and >), type a space and then type the following:
border="5"
The tag should now look like this:
<table border="5">
Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.

26. Tables: cellpadding

If you use the <table> tag on its own, sometimes the text in one cell will be close to that in another cell. This can look a bit messy. It is useful to add a cellpadding value to the <table> tag so there is some space between the text and the border:

	<table cellpadding="5"> gives a space of 5 pixels
	<table cellpadding="10"> gives a space of 10 pixels

Step-by-step instructions

Add cellpadding of 10 pixels to your table.

In the <table border="5"> tag (between the "5" and >), type a space and then type the following:
cellpadding="10"
The tag should now look like this:
<table border="5" cellpadding="10">
Save your file by selecting ‘File’ from the menu bar and then ‘Save’ from the drop-down menu.
View your web page in your web browser. The table should now appear with a border and with plenty of space between the text in each cell and the border.

27. Hyperlinks 1

You can add hyperlinks to other web pages. For example, you might create a website to display the short stories and poetry you have written in your English classes, with an opening page that says a little about you and then has links to the actual stories and poems (each saved as separate web pages).

Hyperlinks are added using the <a href> </a> tags (words in between the two tags will appear on the web page).

The following tag would be a link to a web page with the file name ‘Haunting’ located in the folder ‘Stories’:

<a href="Stories/Haunting.htm">Read my story The Haunting</a>

The following tag would be a link to a web page with the file name ‘Contact’ located in the same folder as the web page:

<a href="Contact.htm">Find out how to contact me</a>

continued

28. Hyperlinks 2

Things to remember when setting hyperlinks

For a hyperlink to work, you must:

	have a file to link to – if the file doesn’t exist, then the web browser won’t be able to find it
	enter the correct file name (and folder if necessary) – if you enter the wrong file name or forget to enter the folder name followed by / the web browser won’t know what to link to and won’t be able to display the page
	always add the extension .htm after the filename – the web browser needs to know that you are linking to another HTML file rather than, for example, a Word document or text file.

29. Linking to other sites 1

You can add hyperlinks to other websites on the Internet. For example, you might want to add a link to your school’s website or to an interesting website you have found while searching the Internet.

Hyperlinks to other websites are added using the
<a href> </a> tags (words in between the two tags will appear on the web page).

The following tag would be a link to the Heinemann website:

<a href="http://www.heinemann.co.uk">Visit Heinemann</a>

The following tag would be a link to the BBC’s GCSE Bitesize website, which provides help with exam revision:

<a href="http://www.bbc.co.uk/schools/gcsebitesize/">Get some help with your revision</a>

continued

30. Linking to other sites 2

Things to remember when linking to other sites

For a hyperlink to another website to work, you must:

	know the URL (web address) of the website/webpage (this is displayed in the address box in your browser and always starts with http://; usually it also has www. in as well, although not always)
	enter the correct URL, remembering to include http://; at the beginning.

31. Saving as HTML

Many software programs (e.g. Microsoft Word, Microsoft Publisher) allow you to ‘Save as HTML’ or ‘Save as Web Page’. The program converts the file you have created (including all your text, images, tables and hyperlinks) into a web page that can be viewed in a web browser and uploaded to the Internet.

This facility can be extremely useful as it can save you a lot of time (as you will guess if you went through the HTML step-by-step instructions). If you are creating fairly simple web pages, then using a word processing or desktop publishing program to create them and then ‘Saving as HTML’ can often be the best way to go about it. It can be particularly useful if you are very familiar with the software package but not very confident with HTML or web authoring tools.

You should note, though, that sometimes these programs will produce pages that look quite different depending on the browser they are viewed in. You also lose some of the control you have if you are creating the web pages yourself by entering HTML code.

32. Web authoring tools

There are many web authoring programs available. These tend to have facilities that are similar to those found in word processing programs and desktop publishing programs, such as drawing text boxes and shapes, changing the colour of text and so on.

Most of them also provide facilities for organising the files for your website and also tend to make inserting images fairly easy.

Some web authoring programs, such as Macromedia Dreamweaver, allow you to edit the HTML tags as well. This ability gives you a lot of control over how your web pages will be displayed.

The many web authoring programs available include:

	Microsoft FrontPage
	Macromedia Dreamweaver
	Adobe GoLive.

33. Uploading web pages

There are several ways of publishing pages on the Internet. However, the most common is using an FTP program.

Using an FTP program

FTP means File Transfer Protocol. It can be used for uploading your files to your Internet Service Provider’s (ISP’s) computer. When you buy webspace (or get it free from your ISP), you will usually be given instructions on how to get your website onto the Internet. You may also be given an FTP program to download to your computer.

Run your FTP program and connect to the FTP server.
Browse to the folder on your computer where your files are saved. Select all the files and folders you need for your web page, including any graphics files.
Open the specified folder on the FTP server.
Drag the web page files on to the FTP server’s window.

34. Publicising your website

If you want people to read your web page you will need to register it on a search engine. There are many sites where you can submit a new web page. All the main search engines have them.

This is the way Yahoo’s registration works:

Go to: www.yahoo.com.
Select the category under which you want your web page to be listed.
Click on ‘Suggest a Site’ at the bottom of the page.
Select the ‘Standard’ (free) option.
Follow the on-screen instructions. You will need to fill in some basic details on a submission form. Make sure these are accurate.

01. Introduction

02. What is HTML?

03. Basic HTML file 1

04. Basic HTML file 2

05. Adding text 1

06. Adding text 2

07. Viewing your page

08. Paragraphs & line breaks 1

09. Paragraphs & line breaks 2

10. Headings 1

11. Headings 2

12. Bold & italics 1

13. Bold & italics 2

14. Lists: bulleted 1

15. Lists: bulleted 2

16. Lists: numbered 1

17. Lists: numbered 2

18. Images 1

19. Images 2

20. Tables: standard 1

21. Tables: standard 2

22. Tables: standard 3

23. Tables: standard 4

24. Tables: standard 5

25. Tables: borders

26. Tables: cellpadding

27. Hyperlinks 1

28. Hyperlinks 2

29. Linking to other sites 1

30. Linking to other sites 2

31. Saving as HTML

32. Web authoring tools

33. Uploading web pages

34. Publicising your website